<template>
  <div class="enroll">
    <h5>用户注册</h5>
    <div class="way">
      <img src="../assets/img/user.png" />
      <input type='text' placeholder="请编辑手机号" v-model="username"/>
    </div>
    <!-- <div class="way ways">
      <img src="../assets/img/yanzhengma.png" />
      <input placeholder="请输入手机号">
    </div> -->
    <div class="way">
      <img src="../assets/img/mima.png" />
      <input type="password" placeholder="请输入验证码" v-model="password"/>
      <div class="yanzhengma" @click="huoqu" v-show="yanzhengshow == 0">获取验证码</div>
      <div class="yanzhengma" v-show="yanzhengshow == 1">{{num}}秒</div>
    </div>
    <!-- <div class="way">
      <img src="../assets/img/mima.png" />
      <input type="password" placeholder="重复密码" v-model="confirm_password"/>
    </div> -->
    <div class="but" @click="enroll">注册</div>
    <div class="denglu" @click="tologin">登录</div>
    <div class="tiaoli">
      <input type="checkbox" v-model="ischecked">
      <p>阅读并同意 <span @click="goxieyi">《平台服务协议条款》</span></p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        username:'',
        password:'',
        confirm_password:'',
        ischecked:false,
        beforeurl:"",
        yanzhengshow:0,
        num:60,
        timer:null
      }
    },
    methods: {
      tologin() {
        //  this.$router.replace({name:'login'})
         this.$router.replace({name:'login',params:{'beforeurl': this.beforeurl}})
      },
      goxieyi() {
        // this.$router.push({name:'enroll'}) 
        this.$router.push({name:'xieyi'})
      },
      // jiance(){},
       huoqu(){
        if(!(/^1[3456789]\d{9}$/.test(this.username))){ 
            this.$toast("手机号码不能为空");  
            return 
        } 
        this.yanzhengshow = 1
        this.timer=setInterval(() => {
                this.num--;
                if(this.num<=0){
                  clearInterval(this.timer);
                  this.yanzhengshow = 0
                  this.num = 60
                }
            },1000);
        this.$axios({
            method: "post",
            url: "/api/gzh_oauth.php?action=ssms",
            data:this.$qs.stringify({
              mobile_phone:this.username,
              tp:'r'
            }),
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
        })
        .then(response => {
            // console.log(response.data)
            if(response.data.error==0){
              this.$toast('发送成功');

            }else{
               this.$toast(response.data.msg);
               this.yanzhengshow = 0
                  this.num = 60
            }
           
        })
      },
      enroll(){
        if(!this.ischecked){
           this.$toast('请同意平台服务条款');
           return
         }
        //   if(this.username==''){
        //    this.$toast('账号不能为空');
        //    return
        //  }
         if(!(/^1[3456789]\d{9}$/.test(this.username))){ 
              this.$toast("手机号码有误，请重填");  
              return 
          } 
          if(this.password==''){
           this.$toast('验证码不能为空');
           return
         }
        //   if(this.confirm_password==''){
        //    this.$toast('请再次输入密码');
        //    return
        //  }
        this.$axios({
            method: "post",
            url: "/api/gzh_oauth.php?action=nregister",
            data:this.$qs.stringify({
              mobile_phone:this.username,
              phone_code:this.password
            }),
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
        })
        .then(response => {
            console.log(response.data)
            if(response.data.error==0){
              this.$toast(response.data.msg);

              localStorage.setItem('uid',response.data.data.uid)
              console.log(this.$router)

              // this.$router.go(-1);

              this.$router.push({name:this.beforeurl})
              // this.$router.push()
              // this.$router.replace({name:'login'})
              // this.$router.replace({name:'login',params:{'beforeurl': this.beforeurl}})
            }else{
               this.$toast(response.data.msg);
            }
           
        })
      }
    },
    created () {
      this.beforeurl=this.$route.params.beforeurl
    },
  }
</script>

<style scoped>
.enroll{
  width: 100%;
}
h5{
  font-size:50px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(51,51,51,1);
  margin-top: 76px;
  margin-left: 71px;
}
.way{
  width:606px;
  height: 100px;
  margin: auto;
  border-bottom: 1PX solid #CCCCCC;
  line-height: 150px;
  display: flex;
  align-items: center;
  margin-top: 50px;
}
.way img{
  width:40px;
  height:45px;
  margin-right: 28px;
  vertical-align:middle;
}
.way input{
  border: none;
  width: 420px;
  height: 45px;
  font-size:28px;
  font-family:PingFang SC;
  font-weight:500;
}
.way .yanzhengma{
  width: 186px;
  height: 50px;
  border: 2px solid #595959;
  border-radius: 10px;
  background: #fff;
  color: #333;
  font-size: 24px;
  line-height: 50px;
  text-align: center;
}
.way input:focus{
  outline:none
}
.ways input{
  width: 350px;
}
.ways span{
  display: inline-block;
  font-size:28px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(9,160,88,1);
}
.but{
  width:606px;
  height:88px;
  background:rgba(5,163,86,1);
  border-radius:44px;
  font-size:36px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(255,255,255,1);
  line-height: 88px;
  text-align: center;
  margin: auto;
  margin-top: 101px;
}
.denglu{
  font-size:36px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(5,163,86,1);
  text-align: center;
  margin-top: 49px;
}
.tiaoli{
  font-size:28px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(102,102,102,1);
  display: flex;
  align-items: center;
  justify-content:center;
  margin-top: 154px;
}
.tiaoli input{
  width:28px;
  height:28px;
  margin-right: 20px;
  display: inline-block;text-align: center;vertical-align: middle;
}
.tiaoli span{
  color: #05A356;
}

</style>
<style >
.van-toast{
width:  80vw!important;
height: 100px !important;
font-size: 28px!important;
}
.van-toast--html, .van-toast--text{
width: 80vw !important;
height: 100px !important;
font-size: 28px!important;
}
</style>